<template>
  <div class="pagination">
    <div v-if="isMobile" ref="tip" v-scroll="onScroll" class="pagination-tip">
      {{ loading ? 'loading ...' : '' }}
    </div>
    <v-pagination
      v-else
      :value="pageNumber"
      :length="length"
      :total-visible="7"
      @input="onChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    pageNumber: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // isMobile: window.innerWidth <= 600,
      isMobile: true,
      tip: ''
    };
  },
  computed: {
    length() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    onChange(pageNumber) {
      this.$emit('change', pageNumber);
    },
    onScroll(e) {
      if (this.loading) return;
      if (this.pageNumber * this.pageSize >= this.total) return;
      const { scrollTop, clientHeight } = e.target.scrollingElement;
      const { offsetTop } = this.$refs.tip;
      if (scrollTop + clientHeight >= offsetTop) {
        this.$emit('change', this.pageNumber + 1, true);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  margin: 12px 0;
  .pagination-tip {
    text-align: center;
    color: rgba(0, 0, 0, 0.87);
  }
}
</style>
